<template>
  <div class="pay">
    <el-card class="box-card">
        <div style="width: 100%;height: 30px;text-align:left;margin-bottom: 30px;border-bottom-style: dashed;border-bottom-width: 1px"><span style="text-align: left;font-weight: 700">在线缴费</span></div>
        <div style="height: 70%;width: 80%;margin: auto">
            <el-table :data="tableData" style="width: 80%;height: 100%" :row-class-name="payTable">
                <el-table-column prop="column" label="栏目" />
                <el-table-column prop="price" label="费用/元" width="100" />
            </el-table>
        </div>
		<div style="height: 40px;width: 100%;margin: 2% auto">
			<el-button type="primary" style="margin-left:67%;float:left" @click="payTuition()">缴费</el-button>
		</div>
		<el-dialog
			v-model="payDialogVisible"
			title=""
			width="30%"
		>
			<span>确认已缴费成功？</span>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="payDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="getPayed()">确认</el-button>
				</span>
			</template>
		</el-dialog>
    </el-card>
  </div>
</template>

<script>

import { ElMessage } from 'element-plus'

import request from '../../utils/request'

export default {
	data() {
		return {
			tableData: [
				{
					column: '学费',
					price: 4400
				},
				{
					column: '书本费',
					price: 500
				},
				{
					column: '住宿费',
					price: 800
				},
				{
					column: '保险费',
					price: 300
				},
				{
					column: '军训费',
					price: 200
				},
				{
					column: '军训服装费',
					price: 200
				},
				{
					column: '军训伙食费',
					price: 300
				},
				{
					column: '共',
					price: 5800
				}
			],
			fee: {
				amount: 5800,
				category: '普通'
			},
			payDialogVisible: false
		}
	},
	created() {
		this.judgePayed();
	},
	methods: {
		payTable({ row, rowIndex }) {
			if (rowIndex === 7) {
				return 'warning-row'
			}
			return ''
		},
		payTuition() {
			request({
				method: 'post',
				url: '/api/pay/do',
				headers: {'jwtToken': this.$store.getters.getToken},
				data: this.fee
			}).then(res => {
				window.open(res.data)
				this.payDialogVisible = true
			})
		},
		getPayed() {
			request({
				method: 'get',
				url: '/api/pay/select',
				headers: {'jwtToken': this.$store.getters.getToken}
			}).then(res => {
				if (res.code === 200) {
					this.payDialogVisible = false;
					this.$router.replace('payed')
				} else if (res.code === 400) {
					this.payDialogVisible = false;
					ElMessage({
						message: '缴费未成功！',
						type: 'warning',
					})
				}
			})
		},
		judgePayed() {
			request({
				method: 'get',
				url: '/api/pay/select',
				headers: {'jwtToken': this.$store.getters.getToken}
			}).then(res => {
				if (res.code === 200) {
					this.$router.replace('payed')
				}
			})
		}
	},
}
</script>

<style lang="less" scoped>
.pay {
    width: 100%;
    height: 100%;
    margin: auto;
}

.el-descriptions__body table td.is-right, .el-descriptions__body table th.is-right{
    text-align: center !important;
}

tr {
    height: 100px;
}

.box-card {
    width: 100%;
    height: 100%;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-lighter);
}
</style>
